{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
	<el-menu mode="horizontal" :default-active="wsNav.activeIndex">
		<el-menu-item :index="v.name" v-for="v of nav" class="p0">
			<a class="block p_x20" :href="v.href" v-text="v.title"></a>
		</el-menu-item>
	</el-menu>
	<el-row class="ws-quote">
		<el-col :span="10" >
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-button type="primary" size="small" @click="dialogVisible=true">添加分组</el-button>
		</el-col>
	</el-row>
	<el-table @selection-change="selectionChange" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" label="ID" width="80" sortable  align="center"></el-table-column>
		<el-table-column prop="name" label="名称" align="center"></el-table-column>
		<el-table-column prop="device_count" label="成员数量" align="center" width="110" sortable></el-table-column>
		<el-table-column prop="remark" label="说明"></el-table-column>
		<el-table-column prop="s_time" label="添加时间" :formatter="dateFormats" align="center" width="140" sortable></el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
				<el-button type="primary" size="mini" class="ws-mini" @click="addDevice(scope.row)">添加成员</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="page">{$list->render()|raw}</div>
	
	<!-- 添加、编辑分组 start -->
	<el-dialog :title="dialogTitle" width="500px" :visible.sync="dialogVisible">
		<el-form ref="forms" :model="data" :rules="rules" label-width="80px">
			<el-form-item label="组名" prop="name">
				<el-input v-model="data.name" placeholder="分组名称"></el-input>
			</el-form-item>
			<el-form-item label="说明" prop="remark">
				<el-input type="textarea" v-model="data.remark" placeholder="分组说明"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
	    	<el-button @click="dialogVisible = false">取 消</el-button>
	    	<el-button type="primary" @click="onSubmit('forms','{:url(\'add\')}')">提 交</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加、编辑分组 end -->


	<!-- 添加、编辑成员 start -->
	<el-dialog title="成员列表" width="600px" :visible.sync="memberVisible">
		<p v-if="!members.length" class="a_c gray">暂无数据</p>
		<el-checkbox-group v-model="checkMember" @change="changeMember">
		    <el-checkbox v-for="v of members" :label="v.id" class="m_y5">{{v.name}}</el-checkbox>
		</el-checkbox-group>
		<div slot="footer" class="dialog-footer">
	    	<el-button type="primary" @click="changeMemberAll" v-if="members.length>=5">全选/取消</el-button>
	  	</div>
	</el-dialog>
	<!-- 添加、编辑成员 end -->
	
</div>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		members:{$members|raw}, //所有的成员
		nav:{$_nav|stripslashes|raw}, 
		checkData:[], // 选中数据

		dialogVisible:false, // 显示添加、编辑框
		dialogTitle:'添加分组',
		data:{}, // 添加、编辑数据
		rules:{
			name:[
				{required: true, message:'请输入分组名称'},
			],
		},


		memberVisible:false,
		defaultMember:[], //原成员列表ID
		checkMember:[], //编辑后的成员列表ID
		groupCurrentId:0,
		row:null,
	},
	created(){
		this.emptyData();
	},
	watch:{
		dialogVisible(newVal){
			if(!newVal&&this.data.id){
				this.emptyData();
			}
		}
	},
	methods:{
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
		change(data){
			this._wspost("{:url('addAll')}",{data});
			this.showExcel(false);
		},
		
		emptyData(newData={}){
			this.data=Object.assign({
				name:'',
				remark:'',
				type:{$type},
			},newData);
		},
		edit(data){
			this.emptyData(data);
			this.dialogTitle='编辑分组';
			this.dialogVisible=true;
		},

		// 添加成员
		addDevice(row){
			this.row=row;
			let group_id=row.id;
			$.post("{:url('getMemberIds')}",{group_id,type:this.type},res=>{
				if(typeof res==='string'){
					res=JSON.parse(res);
				}
				if(res.code){
					this.defaultMember=res.data;
					this.checkMember=res.data;
				}
				this.memberVisible=true;
			},'json')
			this.groupCurrentId=group_id; //当前操作的分组
		},
		changeMemberAll(){
			if(this.checkMember.length===this.members.length){
				this.checkMember=[];
				this.changeMember([]);
			}else{
				let checkMember=[];
				this.members.forEach(item=>{
					checkMember.push(item.id)
				})
				this.checkMember=checkMember;
				this.changeMember(checkMember);
			}
		},
		changeMember(ids){
			let defaultMember=this.defaultMember;
			let diff=[];
			if(ids.length>defaultMember.length){
				let defaults=new Set(defaultMember)
				diff=ids.filter(x=>!defaults.has(x));
			}else{
				let ids_set=new Set(ids)
				diff=defaultMember.filter(x=>!ids_set.has(x));
			}
			this._wspost("{:url('append')}",{diff:diff,type:this.type,group_id:this.groupCurrentId},res=>{
				if(res.code===0){ // 还原
					this.checkMember=defaultMember;
				}else{
					this.defaultMember=ids;
					if(this.row){
						this.row.device_count=ids.length;
					}
				}
			},'json')
			
		}
	}
});
</script>

{/block}